.gpt-message {
	overflow-y: auto;
	flex: 1;
	height: 100%;
}
.msg-list {
	list-style: none !important;
	padding: 0 !important;
	li {
		list-style: none !important;
		margin: 0;
		padding: 0;
		height: fit-content !important;
	}
	.avatar {
		$wh: 32px;
		width: $wh;
		height: $wh;
		min-width: $wh;
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid white;
	}
	.msg {
		background: white;
		padding: 6px 8px;
		white-space: pre-wrap;
		border-radius: var(--radius);
		color: #333;
		width: fit-content;
		border: 1px solid #ededed;
		height: fit-content;
	}
	.user {
		flex-direction: row-reverse;

		.msg-item {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: right;
			position: relative;
		}
		.msg {
			background: var(--primary);
			color: white;
			div {
				overflow: hidden;
			}
		}
		.msg-head {
			flex-direction: row-reverse;
		}
	}
	.msg-item:hover {
		.actions {
			opacity: 1;
		}
	}
}
.msg-item {
	max-width: 60%;
	position: relative;
}
.actions {
	opacity: 0;
	width: fit-content;
	left: 0;
}
.system-icon {
	&:hover {
		background: #ddd;
	}
}

.expand-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
